var pieData = [];
var dateList = [];
var addList = [];
function getData() {
  $.ajax({
    type: "GET",
    url: "https://wangapi.dida555.com/other/getptdatas",
    dataType: "json",
    success: function (data) {
      var options = {
        useEasing: true,  // 过渡动画效果，默认ture
        useGrouping: false,  // 千分位效果，例：1000->1,000。默认true
        separator: ',',   // 使用千分位时分割符号
        decimal: '.',   // 小数位分割符号
        prefix: '',    // 前置符号
        suffix: ''    // 后置符号，可汉字
      }
      var res = data.data;
      var signin = $('#signIn').html();
      var active = $('#active').html();
      var total = $('#total').html();
      var visit = $('#visit').html();
      var adds = $('#adds').html();
      var succeed = $('#succeed').html();
      // 注册
      var num1 = new CountUp('signIn', signin, res.user.money, 0, 2, options);
      // // /活跃用户
      var num2 = new CountUp('active', active, res.huser.money, 0, 2, options);
      // // 总成交额
      var num3 = new CountUp('total', total, res.total.money, 2, 5, options);
      // // 访问量
      var num4 = new CountUp('visit', visit, res.fwnumber.money, 0, 2, options);
      // // 新增单量
      var num5 = new CountUp('adds', adds, res.xznumber.money, 0, 2, options);
      // // 完成单量
      var num6 = new CountUp('succeed', succeed, res.fnnumber.money, 0, 2, options);
      // 开始
      num1.start();
      num2.start();
      num3.start();
      num4.start();
      num5.start();
      num6.start();
      // 月平均数
      var oneData = [];
      var twoData = [];
      oneData = res.monethclass.slice(0, 9)
      twoData = res.monethclass.slice(9, 18)
      var str = "<div class='nav-wrap'>";
      var str2 = "<div class='nav-wrap'>"
      $.each(oneData, function (i, items) {
        str += "<div class='nav'>";
        str += "<div class='num'>" + items.value + "</div>";
        str += "<div class='name'>" + items.key + "</div>";
        str += "</div>";
      });
      str += "</div>";
      $("#swiper1").html(str);

      $.each(twoData, function (i, items) {
        str2 += "<div class='nav'>";
        str2 += "<div class='num'>" + items.value + "</div>";
        str2 += "<div class='name'>" + items.key + "</div>";
        str2 += "</div>";
      });
      str2 += "</div>";
      $("#swiper2").html(str2);

      // 订单状态
      var orderStr = "<ul>";
      var reg = /^(\d{3})\d{4}(\d{4})$/;
      $.each(res.userlists, function (i, items) {
        orderStr += "<li>";
        orderStr += '<div class="item">'
        orderStr += '<div>' + items[1].replace(reg, "$1****$2") + '</div>'
        orderStr += '<div>' + items[2] + '</div>'
        orderStr += '<div>' + items[0] + '</div>'
        orderStr += '</div>'
        orderStr += "</li>";
      });
      orderStr += "</ul>";
      $(".myscroll").append(orderStr);

      // console.log(res, "接口数据")

      // 数字滚动
      // $('.num').counterUp({
      //   delay: 10,//每个数字动画的延迟时间，单位毫秒。
      //   time: 1000//计数动画总的持续时间。
      // });



      // 饼图数据
      var shop = res.shop
      pieData = $.map(shop, function (items, i) {
        return { value: items.value, name: items.key }
      })
      getPie()

      // 折线图
      addList = [];
      dateList = []
      $.each(res.order, function (i, items) {
        dateList.push(items.key);
        addList.push(items.value)
      })
      lineData()
    }
  });

}
$(function () {
  getData();
  setInterval('getData()', 2000);//每隔*秒执行一次 
});


// 饼图
function getPie() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie1  .chart"));
  // 2. 指定配置项和数据
  var option = {
    legend: {
      top: 0,
      itemWidth: 20,
      itemHeight: 12,
      itemGap: 20, //图例每项之间的间隔
      textStyle: {
        color: "rgba(255,255,255,.7)",
        fontSize: "14",
      }
    },

    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 注意颜色写的位置
    color: [
      "#FF9527",
      "#5534CB",
      "#2DD0DF",
      "#1157FF",
      "#FB2663",
      "#6F67F4",
    ],
    series: [
      {
        name: "点位统计",
        type: "pie",
        // 如果radius是百分比则必须加引号
        radius: ["10%", "60%"],
        center: ["50%", "60%"],
        roseType: "radius",
        data: pieData,
        // 修饰饼形图文字相关的样式 label对象
        label: {
          fontSize: 14,
          formatter: '{b}\n{c}%',
          // formatter: '{name|{b}}\n{time|{c} 小时}',
        },
        // 修饰引导线样式
        labelLine: {
          // 连接到图形的线长度
          length: 10,
          // 连接到文字的线长度
          length2: 10
        }
      }
    ]
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
};


// 折线图 
function lineData() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line1 .chart"));

  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#dddc6b"
        }
      }
    },
    legend: {
      top: "0%",
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    grid: {
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },

    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)"
          }
        },

        data: dateList
        // [
        //   "01",
        //   "02",
        //   "03",
        //   "04",
        //   "05",
        //   "06",
        //   "07",
        //   "08",
        //   "09",
        //   "11",
        //   "12",
        //   "13",
        //   "14",
        //   "15",
        //   "16",
        //   "17",
        //   "18",
        //   "19",
        //   "20",
        //   "21",
        //   "22",
        //   "23",
        //   "24",
        //   "25",
        //   "26",
        //   "27",
        //   "28",
        //   "29",
        //   "30"
        // ]
      },
      {
        axisPointer: { show: false },
        axisLine: { show: false },
        position: "bottom",
        offset: 20
      }
    ],

    yAxis: [
      {
        type: "value",
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },

        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        // name: "流入",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            color: "#89F5FF",
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        itemStyle: {
          normal: {
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
          }
        },
        data: addList
        // [
        //   5,
        //   6,
        //   7,
        //   8,
        //   10,
        //   15,
        //   20,
        //   20,
        //   18,
        //   40,
        //   40,
        //   40,
        //   55,
        //   40,
        //   55,
        //   40,
        //   70,
        //   60,
        //   50,
        //   60,
        //   60,
        //   80,
        //   68,
        //   75,
        //   70,
        //   60,
        //   75,
        //   78,
        //   80,
        // ]
      },
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};
